<template>
  <div>
    <h1>vue2写法</h1>
    <div>{{count}}</div>
    <div>计算属性：{{doubleCount}}</div>
    <button @click="plus">点击+1</button>
    <hr>
    <h1>vue3写法</h1>
    <h2>{{num}}</h2>
    <h2>计算属性{{DoubleNum}}</h2>
    <h2>计算属性{{LastName}}</h2>
    <button @click="numPlus">加1 </button>
    <ak-com :shengao='180'
            dir="小王"
            myname="赵"
            @sendlist="getData"></ak-com>
  </div>
</template>

<script lang="ts">
// setup
// 新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次
// 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用

// ref
// 作用: 定义一个数据的响应式
// 语法: const xxx = ref(initValue):
// 创建一个包含响应式数据的引用(reference)对象
// js中操作数据: xxx.value
// 模板中操作数据: 不需要.value
// 一般用来定义一个基本类型的响应式数据
// vue2的叫 option api
// vue 新增的特性 式  组合composition api  也有叫hook Api
// vue3中可以使用vue2几乎所有语法 不建议混用

// vue3
// defineComponent vue3 新增的方法
// 让setup中更好的使用props 等
import { ref, computed, defineComponent } from "vue";
import akCom from "./Ak.vue";
export default defineComponent({
  components: { akCom },
  data() {
    return {
      count: 1,
    };
  },
  setup(props) {
    //替代beforeCreate和created
    // 使用ref创建响应式数据
    let num = ref(1); //创建了一个响应式的数据
    let myname = ref("小王");
    // 创建函数来代替methods
    let numPlus = () => {
      //让num+1
      num.value += 1;
    };
    // 计算属性
    let DoubleNum = computed(() => {
      return num.value * 2;
    });
    // 计算属性
    let LastName = computed(() => {
      return myname.value + "吧";
    });
    let getData = (a: any) => {
      console.log(a);
    };
    return {
      num,
      numPlus,
      DoubleNum,
      LastName,
      getData,
    };
  },
  methods: {
    plus() {
      this.count += 1;
    },
  },
  computed: {
    doubleCount(): number {
      return this.count * 2;
    },
  },
});
</script>
<style lang="less" scoped>
</style>
